import React from 'react'
import { MyContext } from '../../context/index'
import './style.css'
// class Comp extends React.PureComponent {
//   // 方式一
//   // static contextType = MyContext;
//   render() {
//     const { theme, themeList, changeTheme } = this.context
//     return <div>
//       <div>当前主题： {theme}</div>
//       <div>
//         {
//           themeList.map((v, i) => {
//             return <button onClick={() => changeTheme(v.theme)} className={v.theme === theme ? 'active': ''}>{v.theme}</button>
//           })
//         }
//       </div>
//     </div>
//   }
// } 
// // 方式二
// Comp.contextType = MyContext

class Comp extends React.PureComponent {
  render() {
    // 方式三
    return <MyContext.Consumer>
      {
        ({ theme, themeList, changeTheme}) => {
          return <div>
          <div>当前主题： {theme}</div>
          <div>
            {
              themeList.map((v, i) => {
                return <button key={i} onClick={() => changeTheme(v.theme)} className={v.theme === theme ? 'active': ''}>{v.theme}</button>
              })
            }
          </div>
        </div>
        }
      }
    </MyContext.Consumer>
  }
} 


export default Comp